<template>
	<view class="info" >
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="(item,index) in img" :key="index">
					<image class="img" :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="collet">
				<uni-icons class="icon" type="star" size="40" @tap="collected" :color="isCollected ? '#f00' : '#fff'"></uni-icons>
			</view>
		</view>

		<view class="title">
			<view class="top">
				<view class="price">
					￥<view class="money">{{info.price}}</view>.00
				</view>
				<view class="type">
					没有促销使用原价
				</view>
			</view>
			<view class="detail-title">
				{{info.name}}
			</view>
			<view class="detail-desc">
				{{info.description}}
			</view>
		</view>

		<mp-html :tag-style="tagStyle" :content="info.detailMobileHtml" />

		<view class="bottomNav">
			<image class="icon" src="../../../../static/icons/kf.png"></image>
			<view class="btns">
				<view class="addCar" @tap="buy(0)">添加到购物车</view>
				<view class="buyNow" @tap="buy(1)">立即购买</view>
			</view>
		</view>
		<uni-transition :show="isshow" :modeClass="classStyle">
			<view class="mask" @touchmove.stop.prevent="stopMove">
				<view class="card">
					<image class="close" @tap="isshow=!isshow" src="../../../../static/icons/x.png"></image>
					<image v-if="info.skuList" class="img" :src="info.skuList[selectedIndex].pic"></image>
					<view class="title-1">单人沙发</view>
					<view class="countnum">库存数量</view>
					<view class="text-area">
						<view class="title-2">商品选择</view>
						<view class="kind" v-for="(item,index) in info.skuList" :key="index" :class="selectedIndex == index?'active':''" @tap="changeImg(index)">
							<view class="per" v-for="item1 in item.spData">
								<text class="per-item">{{item1.key}} : </text>
								<text class="per-item">{{item1.value}}</text>
							</view>
						</view>
					</view>
					<view class="serve">
						<view class="title-3">特色服务</view>
						<view class="work">
							<view class="work-item">送货上门</view>
							<view class="work-item">上门安装</view>
						</view>
					</view>
					<view class="line"></view>
					
					<view class="buy-count">
						<view class="common-title">购买数量</view>
						<view class="countBox">
							<view class="reduce" @tap="reduce">-</view>
							<input class="numbers" type="text" v-model="num" />
							<view class="add" @tap="add">+</view>
						</view>
					</view>
					
					<view class="btn-buy" @tap="confrim">确定</view>
				</view>
			</view>
		</uni-transition>

	</view>
</template>

<script>
	import {
		productDetail,
		addCart,
		addPreOrder
	} from "../../../../api/kind/kindList/index.js"
	import mix from "../../../../mixins/index.js"
	export default {
		mixins:[mix],
		data() {
			return {
				info: {},
				img: [],
				isCollected: false,
				tagStyle: {
					img: 'width:90%;height:auto;margin:0 auto;display:block'
				},
				isshow: false,
				classStyle: ["fade"],
				selectedIndex: 0,
				current:0,
				num:1
			};
		},
		methods: {
			
			collected() {
				var goods = uni.getStorageSync("goods")
				if (goods == "" || goods == undefined) {
					goods = [];
				}
				if (this.isCollected == true) { //取消收藏
					var item = goods.find(ele => ele.id == this.info.id);
					var index = goods.findIndex(ele => ele.id == this.info.id);
					if (item) {
						goods.splice(index, 1)
					} else {
						goods.push(this.info)
					}
				} else {
					goods.push(this.info)
				}

				this.isCollected = !this.isCollected;
				uni.setStorageSync("goods", goods)
			},
			buy(val) {
				this.current = val
				this.isshow = !this.isshow
				
			},
			changeImg(key){
				this.selectedIndex = key
			},
			reduce(){
				if(this.num == 0){
					this.num == 0
				}else{
					this.num--
				}
			},
			add(){
				this.num++
			},
			stopMove() {

			},
			confrim(){
				if(!this.checkLogins()){
					return  //未登录
				}
				var obj={}
				if(this.current == 0){ //加入购物车
					obj={
						"productId": this.info.id,
						"productSkuId": this.info.skuList[this.selectedIndex].id,
						"quantity": this.num
					}
					addCart(obj).then(res=>{
						console.log(res)
						if(res.success == true){
							uni.showToast({
								title:"添加成功"
							})
						}
					})
				}else{ //立即购买
					obj={
						"orderItemList": [
						    {
						      "productId": this.info.id,
						      "productQuantity": this.num,
						      "productSkuId": this.info.skuList[this.selectedIndex].id
						    }
						  ]
					}
					addPreOrder(obj).then(res=>{
						console.log(res)
						var orderID = res.data.orderId
						uni.navigateTo({
							url:`../../../my/order/confrimOrder/confrimOrder?id=${orderID}`
						})
					})
					
				}
			}
		},
		onLoad(options) {
			productDetail(options.id).then(res => {
				console.log(res)
				//进入页面判断商品是否在本地收藏中
				var goods = uni.getStorageSync("goods");
				if (goods.length == 0) {
					this.isCollected = false
				} else {
					var item = goods.find(ele => ele.id == res.data.product.id);
					if (item) {
						this.isCollected = true
					} else {
						this.isCollected = false
					}
				}

				res.data.product.skuList.forEach(ele => {
					ele.spData = JSON.parse(ele.spData)
				})

				this.info = res.data.product
				var imgArr = res.data.product.albumPics
				this.img = imgArr.split(",")

				uni.setNavigationBarTitle({
					title: res.data.product.name
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		background-color: #F1ECE7;
	}

	.banner {
		position: relative;

		.swiper {
			width: 100%;
			height: 317px;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.collet {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #354e44;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 317px;
			right: 50px;
			margin-top: -25px;
		}
	}

	.title {
		padding: 35px 34px;
		box-sizing: border-box;

		.top {
			display: flex;
			align-items: baseline;

			.price {
				display: flex;
				font-size: 16px;
				color: #f2270c;
				line-height: 30px;

				.money {
					font-size: 30px;
					color: #f2270c;
				}
			}

			.type {
				width: 96px;
				height: 15px;
				background-color: #f2270c;
				font-size: 10px;
				color: #fff;
				border: 1px solid #ff8373;
				border-radius: 2.5px;
				margin-left: 5px;
			}
		}

		.detail-title {
			color: #262626;
			font-size: 16px;
			font-weight: 700;
			overflow: hidden;
			padding: 10px 0 0;
		}

		.detail-desc {
			font-size: 12px;
			padding: 18px 0 0;
			color: #666;
		}
	}

	.bottomNav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		z-index: 8889;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30px;
		background-color: #fff;
		box-sizing: border-box;

		.icon {
			width: 30px;
			height: 30px;
		}

		.btns {
			display: flex;
			justify-content: center;

			.addCar {
				width: 119px;
				height: 40px;
				font-size: 15px;
				line-height: 40px;
				text-align: center;
				margin-top: 5px;
				background-color: #e2e2e2;
				color: #8f8f94;
			}

			.buyNow {
				width: 119px;
				height: 40px;
				font-size: 15px;
				line-height: 40px;
				text-align: center;
				margin-top: 5px;
				background-color: #354e44;
				color: #FFFFFF;
			}
		}
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;

		.card {
			width: 314px;
			height: 463px;
			background-color: #fff;
			border-radius: 20px;
			position: relative;
			
			.close{
				position: absolute;
				top: 31px;
				right: 31px;
				width: 21px;
				height: 21px;
			}
			.img{
				position: absolute;
				left: 31px;
				top: -28px;
				width: 96px;
				height: 96px;
				border-radius: 5px;
				background-color: #F0AD4E;
			}
			.title-1{
				font-size: 14px;
				font-weight: 600;
				color: #3e3e3e;
				margin-left: 142px;
				margin-top: 42px;
			}
			.countnum{
				font-size: 12px;
				margin-left: 142px;
				margin-top: 3px;
				color: #b0b0b0;
			}
			.text-area{
				margin: 14px 28px;
				padding: 0 4px;
				box-sizing: border-box;
				.title-2{
					font-size: 14px;
					font-weight: 600;
					color: #3e3e3e;
					line-height: 20px;
					letter-spacing: 2px;
				}
				.active{
					border: 1px solid #000;
				}
				.kind{
					display: flex;
					height: 30px;
					line-height: 30px;
					padding-left: 5px;
					font-size: 13px;
					margin: 5px;
					border-radius: 10px;
					color: #3e3e3e;
					background-color: #f2f4f3;
					
					.per-item{
						padding-left: 5px;
					}
				}
			}
			.serve{
				margin: 0 28px;
				.title-3{
					font-size: 14px;
					font-weight: 600;
					color: #3e3e3e;
					line-height: 20px;
					letter-spacing: 2px;
				}
				.work{
					.work-item{
						width: 100%;
						height: 30px;
						font-size: 13px;
						line-height: 30px;
						margin: 5px auto;
						border-radius: 10px;
						text-indent: 1em;
						color: #3e3e3e;
						background-color: #f2f4f3;
					}
				}
			}
			.line{
				width: 265px;
				height: 1px;
				background-color: #f2f4f3;
				margin: 18px auto;
			}
			.buy-count{
				width: 258px;
				height: 30px;
				margin: 0 28px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.common-title{
					font-size: 14px;
					color: #3e3e3e;
					line-height: 20px;
					letter-spacing: 2px;
					font-weight: 600;
				}
				.countBox{
					display: flex;
					.reduce{
						width: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						font-size: 15px;
						margin: 0 3px;
						border-radius: 50%;
						background-color: #f1ece7;
					}
					.numbers{
						width: 45px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						font-size: 15px;
						margin: 0 3px;
						border-radius: 15px;
						background-color: #f1ece7;
					}
					.add{
						width: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						font-size: 15px;
						margin: 0 3px;
						border-radius: 50%;
						background-color: #f1ece7;
					}
				}
			}
			.btn-buy{
				width: 104px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #354e44;
				color: #fff;
				font-size: 16px;
				border-radius: 14px;
				margin: 24px auto;
			}
		}
	}
</style>
